With the release of Max, unique touch by electron added support for this feature and in this new section
of the course will cover the electronic touch by API looking at various layout options and interactions.
Now, first thing to take care of is being able to test this.
Not everyone will have access to a Mac with a touch bar.
And of course, being a piece of hardware, I can't show you the real thing.
So to demonstrate the touchpad, I'll be using this on screen simulator on the main touchpad documentation.
We have the simulator linked to here.
I've also added a link to this project page in the lessened resources.
If you have a touch bar on your Mac, however, feel free to just use that.
Also, rest assured, the simulator uses Mac OS Native TouchPad API.
So what you see here is what you'll get in your app.
As we can see when I bring a text editor into view, the touch base simulator immediately changes context
to the newly focused app, with auto suggestions being the main feature of the touch bar now.
And similarly, when I close this window, it allows quick save or delete options.
OK, so with my touchpad visible and ready, let's start by creating a new touch by instance for our
app.
Back on the main touchpad documentation.
Take note that electron now lists this module as experimental it never used to.
That said, the touch by API has been around since version four of Electron and is constantly being
worked on.
So something I definitely use in a production up just worth being aware of.
OK, this main touch bar module then is what we'll use to create a touch, for instance, with all of
its sub modules these year being the components with which we can fl such a touch bar back over on the
project app.
I'll start by requiring the main touchpad module touchpad from electron and then immediately after the
main window reference has been declared, create that new touch bar by assigning to touch bar a new
touch bar, this constructor takes an object with two possible options.
The first being items.
This is simply an array of touch components will create from the touch by sub modules and secondly,
escape item.
This being a single touch by component to replace the escape key on the touchpad.
This one here, it's optional, however, so I'll just leave it out.
Meaning keep the default escape key.
OK, next, we can add some components to this new touch by adding them here in the order, they'll
appear back to the documentation.
We have all these components here, so pick a simple one as the first I'll say a label.
This touchpad label.
With the one option we need to set being the label text.
I'll assign this component to a new variable.
Consed TB label or touch by label equals new touch bar.
Don't touch my label, so accessing the label Submodular directly from the main TouchPad module with
again an options object, then the one option will set for no label as my label.
And add that new label component to the touchpad items, we now have a touch bar, and in that bar we
have one component, this label, but we still need to assign this as our app's main touchpad.
This needs to be done after the app is ready.
So uncreate window again after loading the main window content set touch bar on Mac Mac being the important
Urmia.
Remember, the touchpad is only available on Mac.
So using a platform condition, make sure the app is in fact running on a Mac if.
Process, dot platform.
Equals Darwin call on the main window set touch bar passing at the touch bar we've created here touch
bars being specific to a window and not an app that's done.
So I'll test this.
And we get that label as the first component with the standard escape item still there as we didn't
replace it, this label, of course, doesn't do anything.
So let's try another common component, the touch barb button.
This one having a few more options, I'll create this touch button on a new variable.
Setting to TEEB button again from the main touchpad module, a new touch button.
Set the button lable.
My button.
And a button color with background color.
This takes a hex key, which I have copied for electric blue, adding the button component to the main
touch bar after the label save.
And there is a simple button with the specified label, which right now doesn't do anything, so let's
see how to really customize this and assign some click logic to it.
I'll assign this button the job of opening the dev tools.
So give it a suitable icon, replacing the background color with Icon.
You can, of course, use an icon with a colored background, but I'll stick to the default black button
with a white icon.
This icon option takes a string to the icon file, which would then convert to a native image object,
meaning, as with any native image, we can use retina image naming conventions.
If you're not familiar with us, I suggest you watch the lesson on native image modules.
I'll add my icon to the project there, which is a simple white PMG of 30 by 40 pixels.
However, having a two X at the end of the file name, this will of course be rendered as 15 by 20 pixels
on retina displays or half of its actual size, 20 pixels being the height limit for a well placed icon
in a touchpad.
Set that path on the icon options using a template literal dir name to the project directory slash file
code solid at two exact PMG and by default, icons are set to overlay or centered.
Not a good look when also having a label, so instead set the icon position to left.
I'll also make this label Def Tool's check this before adding the click handler.
And there are standard black touch Barberton with that white deve icon on the left and the label next
to it.
We can now hook this button up.
I'll remove the call to open the dev tools from this great window function.
Sitting on the touchpad button click.
This takes a callback in which we can call that same open dev tools function on the main windows web
contents.
Remember the touchpad only set after the main window is created.
So this is perfectly safe to do, safe to test this again.
This time around.
We don't get the death tools window as that's gone from the create window function, click the death
tolls button on the touchpad and it's opened.
So really simple, but a very convenient extra for Mac users.
The last thing I want to show in this first touch by less and then being Spice's, if you've ever customized
a toolbar in any app, you'll probably know how these work.
For example, to create some separation between these components, we can add a small, large or flexible
spacer component.
Back in the docks, we have this touchbacks, a sub module worth, as mentioned, one option of size
that can be either small.
Also the default large or flexible.
I'll create a new Speiser.
Sitting on TEEB Spizer, a new touchbacks speiser from the Dutch BA module.
No size for now, so defaulting to small and I'll add that spacer between the label and the button.
Save.
There are those two components no longer sitting right up against each other, but rather having a small
space between them, a large spacer then being twice this size and not very commonly used, but a flexible
spacer is so let's see that a flexible spacer takes up as much space as it can, taking into account
other components.
I'll change this to have a size option, setting that to flexible save.
And as expected, that death tolls Spartan is now all the way over on the right, with the Spizer taking
up everything it can in between the label and the button in the next lesson, then we'll see some slightly
more advanced touch components.